<template>
  <div>
    <Table size="large" border :columns="dataTitle" :data="data"></Table>
  </div>
</template>

<script>
  export default {
    props:['nameSelect'],
    components: {
    },
    data () {
      return {
        tag: {
          'title': '客户结清率',
          'path': '/work/settleRate/list'
        },
          dataTitle:[
          {
            title: '到期时间',
            key: 'time',
            align:'center',
            render:(h,params) =>{
              return h('div',this.getLocalTime(params.row.time))
            }
          },
          {
            title: '订单数',
            key: 'order',
            align:'center'
          },
          {
            title: '结清数',
            key: 'settle',
            align:'center'
          },
          {
            title: '结清率(%)',
            key: 'settleRate',
            align:'center',
            render: (h,params) =>{
              return h('div',(params.row.settleRate*100).toFixed(2))
            }
          },
        ],
        data:[],
      }
    },
    mounted(){
      this.getData();
      this.tag.name = this.nameSelect;
      console.log(this.tag,'结清');
      this.$store.commit('changeTag', this.tag.path);
      this.$store.commit('openPage', this.tag);
    },
    methods: {
     getData(){
       this.$post('/statistics/customer/clearanceRate').then(res => {
         console.log(res,'结清');
         let data = res.data;
           this.data = [
                {
                  time:data.expirationTime,
                  order:data.orderNum,
                  settle:data.settlementNum,
                  settleRate:data.settlementRate
                },
              ]
       })
     },
      getLocalTime(time) {//时间戳转日期
        const date = new Date(time);
        const year = date.getFullYear()
        const month = date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1
        const day = date.getDate() < 10 ? '0'+date.getDate() : date.getDate()
        const hour = date.getHours() < 10 ? '0'+date.getHours() : date.getHours()
        const minute = date.getMinutes() < 10 ? '0'+date.getMinutes(): date.getMinutes()
        const second = date.getSeconds() < 10 ? '0'+date.getSeconds(): date.getSeconds()
        const t1 = [year, month, day].join('-')
        const t2 = [hour, minute, second].join(':')
        return `${t1} ${t2}`
      },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .list-btn{
    margin-bottom: 5px;
    margin-right: 5px;
    display: inline-block;
  }
  .refresh-btn{
    float: right;
  }

</style>
